<template>
    <div class="goodlist-container">
        <scroller :on-infinite="infinite" ref="my_scroller" >
        <div class="mui-content">
            <div class="mui-row fliter">
                <div class="mui-col-xs-6" >
                    价格
                    <span class="mui-icon mui-icon-arrowdown"></span>
                </div>
                <div class="mui-col-xs-6">
                    销量
                    <span class="mui-icon mui-icon-arrowdown"></span>
                </div>
            </div>
        </div>

            <div class="goodlist-container mui-clearfix">
                <ul>
                    <li v-for="item in list" :key="item.id"><a href="">
                        <img src="../../images/product.jpg">
                        <h1>{{item.title}} </h1>
                        <p><span class="now-price">￥{{item.oldprice}}</span><span class="old-price">￥{{item.newprice}}</span></p>
                        <button type="button" class="mui-btn mui-btn-primary" @click.prevent="push2Detail(item.id)">点击购买</button>
                    </a></li>
                </ul>
            </div>
        </scroller>


    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return{
                list:[],
                page:1,
            }
        },
        methods:{
            infinite(done){
               this.page++;
               this.getGoodList();
               this.$refs.my_scroller.finishInfinite(true);
            },
            getGoodList(){
                this.$http.get('http://127.0.0.1:3002/getGoods?page='+this.page).then((result)=>{
                    if(result.body.status === 0){
                        this.list =this.list.concat(result.body.message);
                        //return JSON.parse(result.body.message).length;
                    }else{
                        Toast('您的网络抽风了');
                    }
                })
            },
            push2Detail(id){
                this.$router.push('/gooddetail/'+id);
            }
        },
        created(){
            this.getGoodList()
        },
        components:{

        }

    }
</script>

<style scoped>
    .goodlist-container{

    }
li{
    list-style: none;
}
.mui-content{

    padding-top: 45px;
}
    .fliter{
        text-align: center;

        width: 92%;
        margin: 10px auto;
    }
    .fliter .mui-col-xs-6{
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        background-color: #0AB4F7;
    }
.fliter .mui-col-xs-6 span{
    font-size: 16px;
}
    .goodlist-container{
        padding: 0 10px;
    }
    .goodlist-container img{
        width: 100%;
        padding: 10px 5px;
    }
    .goodlist-container ul{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .goodlist-container ul li a{
        display: block;
        border: solid 1px #DDDDDD;
        padding: 5px;
        min-height: 200px;
        box-shadow: 0 0 3px #ddd;
    }
    .goodlist-container ul li{
        width: 50%;
        float: left;
        list-style: none;
        padding: 5px;

    }
    .goodlist-container ul li a h1{
        font-size: 14px;
        text-align: center;
        color: #0f0f0f;
    }
    .goodlist-container ul li a p{
        text-align: center;
    }
    .goodlist-container ul li a p .now-price{
        font-size: 13px;
        font-weight: bold;
        color: red;
        margin-right:3px ;
    }
    .goodlist-container ul li a p .old-price{
        font-size: 13px;
        text-decoration: line-through;
    }
    .goodlist-container ul li a button{
        display:block;
        margin:0 auto
    }
</style>